<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			.box4{
				width: 200px;
				height:300px;
				border: 1px solid red;
				/* margin-top: 100px */		/* 上外边距 */
				/* margin-left: 100px */		/* 左外边距 */
				/* margin-right:100px */		/* 右外边距 */
				/* margin-bottom:100px */		/* 下外边距 */
				/* 复合写法margin:大小值 */
				/* margin: 10px 20px 30px 40px; */
				margin: 100px auto 80px;	/* auto 自动的*/
				padding:10px 20px 30px 40px;
			}
		</style>
		<style>
			.box5{
				width: 200px;
				height:300px;
				border: 1px solid blue;
				margin: 100px auto 0;
				padding:10px;
			}
		</style>
		<style>
			.Wbox{
				width: 200px;
				height:300px;
				border: 1px red solid;
				background-color: hotpink;/* 背景颜色 */
			}
		</style>
		<style>
			.Nbox{
				width: 200px;
				height:300px;
				border: 1px red solid;
				background-color: skyblue;/* 背景颜色 */
			}
			/* 
			相邻两个盒子之间的外边距合并问题:
			两个盒子同时设置了外边距,相同边只取外边距的最大值.
			tips:一般来说只设置一个盒子的外边距
			 */
			/* 
			外边距的使用场景:
			1.盒子水平居中
			2.初始化标签的内、外边距
			外边距所带来的问题:
			1.相邻块级盒子外边距合并的问题：只给其中一个盒子设置外边距
			2.嵌套块级盒子外边距塌陷问题
			  三个解决方法：
			  方法1：给父盒子添加边框
			  方法2:给父盒子添加上内边距
			  方法3.给父盒子添加overflow：hidden
			  居中：text-align：center;
			 */
			
		</style>
		<style>
			.die{
				width: 600px;
				height:600px;
				margin-top:100px;
				background-color: hotpink;
				/* 方法1:border:1px solid red; */
				/* 方法2:padding-top:100px; */
				overflow:hidden;/* 超出部分隐藏 */
			}
		</style>
		<style>
			.er{
				width: 300px;
				height:300px;
				margin-top:100px;
				background-color: skyblue;
			}
		</style>
	</head>
	<body>
		<!-- 外边距：margin -->
		<div class="box4">hell!</div>
		<div class="box5">hell!</div>
		<div class="Wbox">你好</div>
		<div class="Nbox">你好</div>
		<div class="die">
			<div class="er"></div>
		</div>
	</body>
</html>